<template>
	<view :data-theme="theme">
		<view class="payment-status">
			<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
			<view class="iconfont icons icon-duihao2 bg_color" v-if="order_pay_info.paid === 1"></view>
			<view v-if="order_pay_info.paid === 2" class="iconfont icons icon-iconfontguanbi"></view>
			<!-- 失败时：订单支付失败 -->
			<view class="status" v-if="order_pay_info.payType != 'offline'">{{ status == 2 ? '订单取消支付' : errMsg ? '订单支付异常' : payResult }}</view>
			<view class="status" v-else>订单创建成功</view>
			<view class="wrapper">
				<view v-if="fromType !== 'svip'" class="item acea-row row-between-wrapper">
					<view>订单编号</view>
					<view class="itemCom">{{ order_pay_info.orderNo }}</view>
				</view>
				<view v-if="fromType !== 'svip'" class="item acea-row row-between-wrapper">
					<view>下单时间</view>
					<view class="itemCom">{{ order_pay_info.createTime ? order_pay_info.createTime : '-' }}</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>支付方式</view>
					<view class="itemCom">{{ order_pay_info.payType | payTypeFilter }}支付</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>支付金额</view>
					<view class="itemCom">{{ order_pay_info.payPrice }}</view>
				</view>
				<!--失败时加上这个  -->
				<view class="item acea-row row-between-wrapper" v-if="!order_pay_info.paid && order_pay_info.payType != 'offline'">
					<view>失败原因</view>
					<view class="itemCom">{{ status == 2 ? '取消支付' : msg }}</view>
				</view>
			</view>
			<!--失败时： 重新购买 -->
			<view @tap="goOrderDetails">
				<button formType="submit" class="returnBnt bg_color" hover-class="none">{{ fromType !== 'svip' ? '查看订单' : '查看会员' }}</button>
			</view>
			<button
				@click="goPink(order_pay_info.pinkId)"
				class="returnBnt cart_color"
				formType="submit"
				hover-class="none"
				v-if="order_pay_info.pinkId && order_pay_info.paid != 0 && status != 2 && status != 1 && fromType !== 'svip'"
			>
				邀请好友参团
			</button>
			<button @click="goIndex" class="returnBnt cart-color" formType="submit" hover-class="none" v-else>返回首页</button>
		</view>
	</view>
</template>

<script>
import { getOrderDetail, wechatQueryPayResult } from '@/api/order.js';
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
let app = getApp();
export default {
	data() {
		return {
			orderNo: '',
			order_pay_info: {
				paid: 0,
				_status: {}
			},
			status: 0,
			msg: '',
			errMsg: false,
			payResult: '订单查询中...',
			theme: app.globalData.theme,
			fromType: '' //会员支付 还是商品支付
		};
	},
	computed: mapGetters(['isLogin']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getOrderPayInfo();
				}
			},
			deep: true
		}
	},
	onLoad: function (options) {
		this.fromType = options.fromType;
		this.orderNo = options.order_id;
		if (this.fromType !== 'svip') {
			this.status = options.status || 0;
			if (this.isLogin) {
				this.getOrderPayInfo();
			} else {
				toLogin();
			}
		} else {
			this.order_pay_info.payType = options.payType;
			this.order_pay_info.payPrice = options.payPrice;
			if (options.payType !== 'yue') {
				uni.showLoading({
					title: '正在加载中'
				});
				setTimeout(() => {
					this.wechatQueryPay('svip');
				}, 500);
			} else {
				this.payResult = '支付成功';
				this.order_pay_info.paid = 1;
			}
		}
	},
	methods: {
		//svip支付成功之后更新会员状态
		setPaidMember() {
			this.$store.commit('updatePaidMember', true);
		},
		//微信支付查明结果
		wechatQueryPay(orderType) {
			wechatQueryPayResult({
				orderType: orderType,
				orderNo: this.orderNo
			})
				.then((res) => {
					this.payResult = '支付成功';
					this.order_pay_info.paid = 1;
					uni.hideLoading();
					this.setPaidMember();
				})
				.catch((err) => {
					this.order_pay_info.paid = 2;
					this.errMsg = true;
					this.msg = err;
					uni.hideLoading();
					this.$util.Tips({
						title: err
					});
				});
		},
		onLoadFun: function () {
			if (this.fromType !== 'svip') this.getOrderPayInfo();
		},
		/**
		 *
		 * 支付完成查询支付状态
		 *
		 */
		getOrderPayInfo: function () {
			let that = this;
			uni.showLoading({
				title: '正在加载中'
			});
			getOrderDetail(that.orderNo)
				.then((res) => {
					that.$set(that, 'order_pay_info', res.data);
					if (res.data.payType === 'weixin' && res.data.paid === false && this.status != 2) {
						setTimeout(() => {
							that.wechatQueryPay('order');
						}, 2000);
					} else {
						if (res.data.paid) {
							this.payResult = '支付成功';
							this.order_pay_info.paid = 1;
						} else {
							this.payResult = '支付失败';
							this.order_pay_info.paid = 2;
						}
						uni.hideLoading();
					}
				})
				.catch((err) => {
					uni.hideLoading();
				});
		},
		/**
		 * 去首页关闭当前所有页面
		 */
		goIndex: function (e) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 去参团页面；
		goPink: function (id) {
			uni.navigateTo({
				url: '/pages/activity/goods_combination_status/index?id=' + id
			});
		},
		/**
		 *
		 * 去订单详情页面
		 */
		goOrderDetails: function (e) {
			uni.navigateTo({
				url: this.fromType !== 'svip' ? '/pages/goods/order_list/index' : '/pages/activity/vip_paid/index'
			});
		}
	}
};
</script>

<style lang="scss">
.icon-iconfontguanbi {
	background-color: #999 !important;
	text-shadow: none !important;
}
.bg_color {
	@include main_bg_color(theme);
}
.cart_color {
	@include main_color(theme);
	@include coupons_border_color(theme);
}
.payment-status {
	background-color: #fff;
	margin: 195rpx 30rpx 0 30rpx;
	border-radius: 10rpx;
	padding: 1rpx 0 28rpx 0;
}

.payment-status .icons {
	font-size: 70rpx;
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 140rpx;
	text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.1);
	border: 6rpx solid #f5f5f5;
	margin: -76rpx auto 0 auto;
	background-color: #999;
}

.payment-status .iconfont {
	font-size: 70rpx;
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 140rpx;
	text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.1);
	border: 6rpx solid #f5f5f5;
	margin: -76rpx auto 0 auto;
	background-color: #999;
}

.payment-status .iconfont.fail {
	text-shadow: 0px 4px 0px #7a7a7a;
}

.payment-status .status {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin: 25rpx 0 37rpx 0;
}

.payment-status .wrapper {
	border: 1rpx solid #eee;
	margin: 0 30rpx 47rpx 30rpx;
	padding: 35rpx 0;
	border-left: 0;
	border-right: 0;
}

.payment-status .wrapper .item {
	font-size: 28rpx;
	color: #282828;
}

.payment-status .wrapper .item ~ .item {
	margin-top: 20rpx;
}

.payment-status .wrapper .item .itemCom {
	color: #666;
}

.payment-status .returnBnt {
	width: 630rpx;
	height: 86rpx;
	border-radius: 50rpx;
	color: #fff;
	font-size: 30rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 0 auto 20rpx auto;
}
.cart-color {
	@include main_color(theme);
	@include coupons_border_color(theme);
}
</style>
